<template>
    <div class="order-management-container">
      <h2>我的订单</h2>
      <ul>
        <li v-for="order in orders" :key="order.id">
          <p>订单号: {{ order.orderNumber }}</p>
          <p>车次: {{ order.trip.tripNumber }}</p>
          <p>座位类型: {{ order.seatType }}</p>
          <p>状态: {{ order.status }}</p>
          <button v-if="order.status === '未支付'" @click="payOrder(order.id)">支付</button>
          <button v-if="order.status === '已支付'" @click="viewDetail(order.id)">查看详情</button>
          <button @click="cancelOrder(order.id)">取消</button>
        </li>
      </ul>
      <p v-if="noOrdersMessage" class="text-danger">{{ noOrdersMessage }}</p>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        orders: [],
        noOrdersMessage: ''
      };
    },
    created() {
      // 获取当前用户的订单列表，假设后端接口需要传递用户ID或者通过Token识别用户
      axios.get('/api/orders')
     .then(response => {
          this.orders = response.data;
          if (this.orders.length === 0) {
            this.noOrdersMessage = '暂无订单';
          }
        })
     .catch(error => {
          console.log(error);
        });
    },
    methods: {
      payOrder(orderId) {
        axios.post(`/api/orders/${orderId}/pay`)
       .then(response => {
            // 更新订单状态并刷新页面（可优化为局部更新）
            this.orders = this.orders.map(order => {
              if (order.id === orderId) {
                order.status = '已支付';
              }
              return order;
            });
          })
       .catch(error => {
          console.log(error);
        });
      },
      viewDetail(orderId) {
        // 跳转到订单详情页面并传递订单ID等信息（假设订单详情页面路由是 /order-detail）
        this.$router.push({
          path: '/order-detail',
          query: {
            orderId: orderId
          }
        });
      },
      cancelOrder(orderId) {
        axios.post(`/api/orders/${orderId}/cancel`)
       .then(response => {
            // 更新订单状态并刷新页面（可优化为局部更新）
            this.orders = this.orders.map(order => {
              if (order.id === orderId) {
                order.status = '已取消';
              }
              return order;
            });
          })
       .catch(error => {
          console.log(error);
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .order-management-container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  </style>